<script setup>
import { ref, reactive, toRaw } from 'vue';
import { service, cache } from '@utils';
import { ElMessage } from 'element-plus';
// import Vue3Cron from '@/components/vue3Cron/index';
import noVue3Cron from '../../components/cron/index';
const emit = defineEmits(['refresh']);

defineProps({
    // services: Array,
    // states: Array
});

const visible = ref(false);
const formRef = ref();
const isShowCronCore = ref(false); // 是否打开cron表达式配置框
const submiting = ref(false); // 是否正在提交中
const services = reactive([
    {
        val: 0,
        label: '允许',
    },
    {
        val: 1,
        label: '禁止',
    },
]);
const misfirePolicyArr = reactive([
    {
        val: 1,
        label: '立即执行',
    },
    {
        val: 2,
        label: '执行一次',
    },
    {
        val: 3,
        label: '放弃执行',
    },
]);
const disabledForm = ref(false);
const state = reactive({
    param: {},
});
const openCron = () => {
    isShowCronCore.value = true;
};
const rules = {
    jobName: [{ required: true, message: '请输入', trigger: 'blur' }],
    concurrent: [{ required: true, message: '请选择', trigger: 'change' }],
    cronExpression: [{ required: true, message: '请输入', trigger: 'blur' }],
    invokeTarget: [{ required: true, message: '请输入', trigger: 'blur' }],
    jobGroup: [{ required: true, message: '请输入', trigger: 'blur' }],
    misfirePolicy: [{ required: true, message: '请选择', trigger: 'blur' }],
    status: [{ required: true, message: '请点击', trigger: 'blur' }],
};

const open = (item, disabled) => {
    state.param = { ...item };
    if (!item) {
        state.param.cronExpression = '* * * * * ? *';
    } else {
        if(disabled){
            getDetail(item.jobId);
        }
    }
    disabledForm.value = disabled;
    visible.value = true;
};
const getDetail = async jobId => {
    const res = await service.monitor.scheduleGetInfo(jobId);
    if (res.success) {
        state.param = res.data;
    }
};
const close = () => {
    visible.value = false;
    state.param = {};
};

const sure = async () => {
    formRef.value.validate(valid => {
        if (valid) {
            realSubmit();
        }
    });
};
const realSubmit = async () => {
    let res;
    if (state.param.jobId) {
        res = await service.monitor.scheduleEdit(toRaw(state.param));
    } else {
        res = await service.monitor.scheduleAdd(toRaw(state.param));
    }
    console.log(res);
    if (res) {
        ElMessage.success(state.param.jobId ? '修改成功' : '添加成功');
        close();
        emit('refresh', !!state.param.jobId);
    }
};
const crontabFill = val => {
    if (typeof val !== 'string') return false;
    console.log(val);
    isShowCronCore.value = false;
    state.param.cronExpression = val;
};
//把方法暴露给父组件
defineExpose({
    open,
});
</script>

<template>
    <el-dialog v-model="visible" :title="!!state.param.id ? '修改' : '新增'" center :close-on-click-modal="false" @close="close" destroy-on-close :width="600">
        <section>
            <el-form :model="state.param" :rules="rules" ref="formRef" :disabled="disabledForm" label-width="130px" label-suffix=":" onsubmit="return false;">
                <el-form-item label="任务名称" prop="jobName">
                    <el-input v-model="state.param.jobName" placeholder="请输入任务名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="是否并发执行" prop="concurrent">
                    <el-select v-model="state.param.concurrent" style="width: 100%" placeholder="请选择是否并发执行" clearable>
                        <el-option v-for="{ label, val } in services" :key="val" :label="label" :value="val" />
                    </el-select>
                </el-form-item>
                <el-form-item label="cron执行表达式" prop="cronExpression">
                    <el-input v-model="state.param.cronExpression" :disabled="true" placeholder="请输入cron执行表达式" clearable>
                        <template #append>
                            <el-button @click="openCron">生出表达式</el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="调用目标字符串" prop="invokeTarget">
                    <el-input v-model="state.param.invokeTarget" placeholder="请输入调用目标字符串" clearable></el-input>
                </el-form-item>
                <el-form-item label="任务组名" prop="jobGroup">
                    <el-input v-model="state.param.jobGroup" placeholder="请输入任务组名" clearable></el-input>
                </el-form-item>
                <el-form-item label="计划执行策略" prop="misfirePolicy">
                    <el-select v-model="state.param.misfirePolicy" style="width: 100%" placeholder="请选择计划执行策略" clearable>
                        <el-option v-for="{ label, val } in misfirePolicyArr" :key="val" :label="label" :value="val" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-switch v-model="state.param.status" activeText="正常" inactiveText="暂停" :activeValue="1" :inactiveValue="0" />
                </el-form-item>
                <template v-if="disabledForm">
                    <el-form-item label="更新者">
                        <el-input v-model="state.param.updateBy" placeholder="请输入更新者" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="更新时间">
                        <el-input v-model="state.param.updateTime" placeholder="请输入更新时间" clearable></el-input>
                    </el-form-item>
                </template>
            </el-form>
            <el-dialog v-model="isShowCronCore">
                <noVue3Cron :cronValue="state.param.cronExpression" @change="crontabFill" @close="isShowCronCore = false" max-height="400px" i18n="cn"></noVue3Cron>
                <!-- <Vue3Cron @change="crontabFill" v-model:value="state.param.cronExpression" /> -->
            </el-dialog>
        </section>

        <template #footer>
            <span class="flex-align-end">
                <div class="margin-right20">
                    <el-button @click="close">取消</el-button>
                </div>
                <el-button v-if="!disabledForm" type="primary" @click="sure">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
